<template>
  <div class="addAdmin">
    <mains :title="'新增管理员'">
      <template #content>
        <Card style="width: 100%">
          <template #title>
            <div class="title">编辑管理员信息</div>
          </template>
          <!-- 表单区域 -->
          <Form
            ref="formValidates"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="80"
            label-position="left"
          >
            <FormItem label="用户名" prop="username">
              <Input
                v-model="formValidate.username"
                placeholder="请输入用户名"
                style="width: 240px"
              ></Input>
            </FormItem>
            <FormItem label="账号" prop="account">
              <Input
                v-model="formValidate.account"
                placeholder="请输入账号"
                style="width: 240px"
              ></Input>
            </FormItem>
            <FormItem label="选择角色" prop="role">
              <Select v-model="formValidate.role" placeholder="请选择角色" style="width: 240px">
                <Option value="超级管理员">超级管理员</Option>
                <Option value="普通用户">普通用户</Option>
                <Option value="管理员">管理员</Option>
              </Select>
            </FormItem>
            <FormItem label="手机号" prop="tel">
              <Input
                v-model="formValidate.tel"
                placeholder="请输入手机号"
                style="width: 240px"
              ></Input>
            </FormItem>
            <FormItem label="密码" prop="password">
              <Input
                v-model="formValidate.password"
                placeholder="请输入密码"
                type="password"
                style="width: 240px"
              ></Input>
            </FormItem>
            <FormItem label="状态" prop="isEnable">
              <Switch v-model="formValidate.isEnable" :true-value="1" :false-value="0" />
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleSubmit">保存</Button>
              <Button @click="handleReset" style="margin-left: 8px">取消</Button>
            </FormItem>
          </Form>
        </Card>
      </template>
    </mains>
  </div>
</template>

<script setup>
import mains from '@/components/main.vue'
import { ref,nextTick, onBeforeUnmount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getAdminList, addAdmin,editAdmin } from '@/api/systemApi/adminApi'
import { Message } from 'view-ui-plus'
const route = useRoute()
const router = useRouter()

const params = route.query
// console.log(params)

const formValidates = ref(null)
let formValidate = ref({
  username: '',
  account: '',
  role: '',
  tel: '',
  password: '',
  isEnable: 1,
})
const ruleValidate = ref({
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur',
    },
  ],
  account: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'blur',
    },
  ],
  role: [{ required: true, message: '请选择角色', trigger: 'change' }],
  tel: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { type: 'string', min: 6, message: '数字加字母，最少6位', trigger: 'blur' },
  ],
})
const id = ref('')
// 获取数据
const getAdminLists = async () => {
  try {
    const res = await getAdminList({
      pageNum: 1,
      pageSize: 0,
    })
    if (res.code == 200) {
      formValidate.value = res.data.list.find((item) => item.id == params.id)
      id.value = res.data.list.length * 1 + 1
    }
  } catch (error) {
    console.error('获取管理员列表失败:', error)
  }
}
if (params.id) {
  getAdminLists()
}

// 点击保存
const handleSubmit = () => {
  formValidates.value.validate(async (valid) => {
    if (valid) {
      if (params.id) {
        // 编辑操作
        let res = await editAdmin({ id: params.id, ...formValidate.value })
        if (res.code == 200) {
          // formValidate.value = {}
          router.back()
        } else {
          Message.error(res.message)
        }
        console.log(111)
      } else {
        // 新增操作
        let res = await addAdmin({ id: id.value, ...formValidate.value })
        console.log('res', res)
        if (res.code == 200) {
          router.push('/home/administrator')
          // formValidate.value = {}
        } else {
          Message.error(res.message)
        }
      }
    } else {
      Message.error('Fail!')
    }
  })
}
// 取消按钮
const handleReset = async () => {
  await nextTick();
  router.push('/home/administrator')
}
</script>

<style scoped>
.addAdmin {
  :deep(.ivu-card-head) {
    background: #ebeef1;
  }
  .title {
    font-size: 16px;
    font-weight: 800;
    color: #409eff;
  }
}
</style>
